<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in listData" :key='index' id="div1"><img :src="item.address" alt=""></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import {swiperImg} from '@/api/swiperApi.js'
export default {
  data() {
      return {
          listData:[]
      }
  },
  async created(){
     let re = await swiperImg(); 
      this.listData = re;
      // console.log("123", re)
  },
  updated() {
    new Swiper(".swiper-container", {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: {
        //自动播放
        delay: 2200,
        disableOnInteraction: false,
      },
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },

      // 如果需要滚动条
      // scrollbar: {
      //   el: ".swiper-scrollbar",
      // },
    });
  },
};
</script>

<style lang="less" scoped>
.swiper-container {
  margin-top: 2vh;
  width: 96vw;
  height: 30vh;
  border-radius: 2%;
  #div1{
      img{
          width: 100vw;
          height: 35vh;
      }
  }
}
</style>